<template>
  <div class="content">
    <el-row :gutter="20">
    <!-- 基础是id和username,time查询 -->
    <el-col :span="6">
    <el-input v-model="queryForm.id"  placeholder="请输入id" />
    </el-col>
    <el-col :span="6">
    <el-input v-model="queryForm.username"  placeholder="请输入用户名" />
    </el-col>
    <!-- 日期选择器 -->
    <el-col :span="6">
     <el-date-picker
        v-model="queryForm.date"
        type="date"
        style="width: 100%;"
        placeholder="请输入日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-col>
    <el-col :span="6">
     <el-button type="primary" @click="search">搜索</el-button>
     <el-button type="primary" @click="reset">重置</el-button>
    </el-col>
    </el-row>
    <!-- 如需请往下加el-row和el-col 保持栅格布局 -->
    <slot name="custom"></slot>
  </div>
</template>
<script setup lang="ts">
/* 搜索对象 */
import { ref,defineEmits } from 'vue'
// const emit = defineEmits(['getSearch']);
const emit = defineEmits<{
  (event: 'getSearch', queryForm: queryType): void
  (event:'getReset',queryForm:queryType):void
}>()
interface queryType{
  id?: string|number,
  username?: string,
  date?: string
}

const queryForm = ref<queryType>({
  id: '',
  username: '',
  date:''
})

/* 搜索 */
const search = () => { 
  /* 自定义查询返回上一级 */
  emit('getSearch',queryForm.value)
}
/* 重置 */
const reset = () => {
  for (let i in queryForm.value) {
    queryForm.value[i]=''
  }
  /* 自定义重置返回上一级 */
  emit('getReset',queryForm.value)
}
</script>
<style lang="scss" scoped>
.el-row{
  margin-bottom: 10px;
}
</style>